-webkit-mask-repeat-y

Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.

Die Eigenschaft -webkit-mask-repeat-y legt fest, ob und wie ein Maskenbild vertikal wiederholt (gekachelt) wird.

Syntax

css

/* Keyword values */
-webkit-mask-repeat-y: repeat;
-webkit-mask-repeat-y: no-repeat;
-webkit-mask-repeat-y: space;
-webkit-mask-repeat-y: round;

/* Multiple values */
-webkit-mask-repeat-y: repeat, no-repeat, space;

/* Global values */
-webkit-mask-repeat-y: inherit;
-webkit-mask-repeat-y: initial;
-webkit-mask-repeat-y: revert;
-webkit-mask-repeat-y: revert-layer;
-webkit-mask-repeat-y: unset;

Werte

repeat: Das Maskenbild wird vertikal wiederholt.
no-repeat: Das Maskenbild wird nicht vertikal wiederholt; es wird nur eine Kopie des Maskenbildes in vertikaler Richtung gezeichnet. Der vertikale Rest des Inhalts des maskierten Elements wird nicht angezeigt.
repeat: Das Maskenbild wird vertikal wiederholt.
space: Das Bild wird so oft wie möglich ohne Abschneiden wiederholt. Die ersten und letzten Bilder werden an den oberen und unteren Rand des Elements angeheftet, und der Freiraum wird gleichmäßig zwischen den Bildern verteilt. Die Eigenschaft mask-position wird ignoriert, es sei denn, nur ein Bild kann ohne Abschneiden angezeigt werden. Der einzige Fall, in dem beim Verwenden von space abgeschnitten wird, ist, wenn nicht genug Platz für die Anzeige eines Bildes vorhanden ist.
round: Wenn der verfügbare vertikale Platz größer wird, werden die wiederholten Bilder gedehnt (ohne Lücken zu lassen), bis Platz für ein weiteres Bild vorhanden ist. Wenn ein weiteres Bild hinzugefügt wird, werden alle aktuellen Bilder komprimiert, um Platz zu schaffen. Beispiel: Ein Bild mit einer ursprünglichen Höhe von 260px, das dreimal wiederholt wird, könnte sich dehnen, bis jede Wiederholung 300px hoch ist, und dann wird ein weiteres Bild hinzugefügt. Sie werden dann auf eine Höhe von 225px komprimiert.

Formale Definition

Anfangswert	`repeat`
Anwendbar auf	alle Elemente
Vererbt	Nein
Berechneter Wert	für `<length>` der absolute Wert, ansonsten ein Prozentwert
Animationstyp	diskret

Formale Syntax

-webkit-mask-repeat-y = 
  repeat     |
  no-repeat  |
  space      |
  round

Beispiele

Verwendung eines wiederholenden oder nicht wiederholenden Maskenbildes

css

.example-one {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat-y: repeat;
}

.example-two {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat-y: no-repeat;
}

Verwendung mehrerer Maskenbilder

Sie können einen anderen <repeat-style> für jedes Maskenbild angeben, getrennt durch Kommas:

css

.example-three {
  -webkit-mask-image: url("mask1.png"), url("mask2.png");
  -webkit-mask-repeat-y: repeat, space;
}

Jedes Bild wird mit dem entsprechenden Wiederholungsstil abgeglichen, vom zuerst angegebenen bis zum zuletzt angegebenen.